﻿<!DOCTYPE html>
<html>
<head>
    <title>随访进度管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!--bootstrap 日历插件 css-->
    <link rel="stylesheet"
          href="resources/scripts/assets/bootstrap-calendar/components/bootstrap2/css/bootstrap-responsive.css">
    <link rel="stylesheet" href="resources/scripts/assets/bootstrap-calendar/css/calendar.css">
    <!--bootStrop css 单选框样式-->
    <link rel="stylesheet" href="resources/scripts/assets/bootstrap/css/icheck-bootstrap.css">
    <!--bootStrop css 主样式-->
    <link rel="stylesheet" href="resources/scripts/assets/bootstrap/css/bootstrap.min.css">
    <!--loading样式-->
    <link rel="stylesheet" href="files/用户管理/loading.css">
    <!--jquery js-->
    <script src="resources/scripts/assets/js/jquery-2.2.3.min.js"></script>
    <!--bootStrop js-->
    <script src="resources/scripts/assets/bootstrap/js/bootstrap.min.js"></script>
    <!--angular js-->
    <script src="resources/scripts/angular/angular.min.js"></script>
    <style>
        .content {
            margin: 10px auto;
            display: none;
        }

        .content.show {
            display: block;

        }
    </style>
    <script>
        $(function () {
            $("#title").load("导航条.html");
            //获取页面的每个按钮
            let btns = $(".btn_active");
            //获取内容盒子
            let contents = $(".content");
            //遍历每个按钮为其添加点击事件
            for (var i = 0; i < btns.length; i++) {
                btns[i].index = i;
                btns[i].onclick = function () {
                    //对当前点击的按钮赋予active类名及显示当前按钮对应的内容
                    for (var j = 0; j < btns.length; j++) {
                        btns[j].className = btns[j].className.replace(' active', '').trim();
                        contents[j].className = contents[j].className.replace(' show', '').trim();
                    }
                    this.className = this.className + ' active';
                    contents[this.index].className = contents[this.index].className + ' show';
                };
            }
        });
        //查询科室
        selectAjax("FollowUpGroup/SelectByResponsibleDepartment", "keshi");
        //查询随访组名称
        selectAjax("FollowUpGroup/SelectAll", "suifangzu");

        function selectAjax(url, attribute) {
            $.ajax({
                url: "http://localhost:8989/hospital/" + url,
                type: "post",
                dataType: "json",
                success: function (data) {
                    for (let dataKey in data) {
                        if (attribute == "keshi" && data[dataKey].responsibleDepartment != undefined) {
                            let datas = data[dataKey].responsibleDepartment;
                            $("#" + attribute).append('<option class="keshi" value=' + datas + '>' + datas + '</option>');
                        }
                        for (let key in data[dataKey]) {
                            if (attribute == "suifangzu" && data[dataKey][key].name != undefined) {
                                let datas = data[dataKey][key].name;
                                $("#" + attribute).append('<option class="suifang" value=' + datas + '>' + datas + '</option>');
                            }
                        }
                    }
                }
            });
        }

        angular.module("suiFang", []).controller('suiFangView', function ($scope) {
            //分页数据
            let pagingUtil = {
                page: 1,
                pageNum: 5
            };

            // 上一页/下一页
            $scope.page1 = function (status) {
                //上一页
                if (status == "-1") {
                    if (pagingUtil.page > 1) {
                        pagingUtil.page = pagingUtil.page - 1;
                        //调用表格数据与分页数据函数
                        $scope.SelectAll();
                    }
                }
                //下一页
                if (status == "+1") {
                    if (pagingUtil.page < $scope.page.remaining_pages) {
                        pagingUtil.page = pagingUtil.page + 1;
                        //调用表格数据与分页数据函数
                        $scope.SelectAll();
                    }
                }
                //尾页
                if (status == "" || status == null) {
                    pagingUtil.page = $scope.page.remaining_pages;
                    //调用表格数据与分页数据函数
                    $scope.SelectAll();
                }
                //跳转页
                if (status == "jump") {
                    let val = $("#JumpPage").val();
                    if (val == null || val == "") {
                        alert("请输入跳转页");
                        return;
                    }
                    if (val > $scope.page.remaining_pages) {
                        alert("没有下一页了");
                        return;
                    }
                    pagingUtil.page = val;
                    //调用表格数据与分页数据函数
                    $scope.SelectAll();
                }
            };
            $scope.SelectAll = function (val) {
                $("#state").prop("value", val);
                let state = $("#state").val();
                $.ajax({
                    url: "http://localhost:8989/hospital/Patient/SelectAll",
                    type: "post",
                    data: {
                        page: pagingUtil.page,
                        pageNum: pagingUtil.pageNum,
                        status: state
                    },
                    dataType: "json",
                    success: function (data) {
                        for (let dataKey in data) {
                            $scope.$apply(function () {
                                $scope.page = data[dataKey];
                                if ($scope.page.count == 0) {
                                    $("#column").html("<tr><td style=\"color: red\">没有数据</td></tr>");
                                    $(".data").empty();
                                } else {
                                    setTimeout(function () {
                                        $("#column").empty();
                                    }, 10000)
                                }
                                for (let i = 0; i <= data[dataKey].length - 1; i++) {
                                    $scope.datas = data[dataKey];
                                }
                            });
                        }
                        $(".spinner").css("display", "none");
                    }, error: function () {
                        $("#column").html("<span style='color:red'>加载失败</span>");
                        $(".spinner").css("display", "none");
                    }
                });
                //更改获取的id值
                page("shangyes");
                page("xiayes");
                page("weiyes");
                page("tiaozhuanyes");

                page("shangye");
                page("xiaye");
                page("weiye");
                page("tiaozhuanye");

                //修改触发的点击事件
                function page(state) {
                    if (state == "shangyes") {
                        $("#" + state).css("display", "none");
                    } else if (state == "xiayes") {
                        $("#" + state).css("display", "none");
                    } else if (state == "weiyes") {
                        $("#" + state).css("display", "none");
                    } else if (state == "tiaozhuanyes") {
                        $("#" + state).css("display", "none");
                    } else if (state == "shangye") {
                        $("#" + state).css("display", "");
                    } else if (state == "xiaye") {
                        $("#" + state).css("display", "");
                    } else if (state == "weiye") {
                        $("#" + state).css("display", "");
                    } else if (state == "tiaozhuanye") {
                        $("#" + state).css("display", "");
                    }
                }
            };
            $scope.SelectAll();
            //随访按钮功能
            $scope.followUp = function (val) {
                if (val == "yisuifang") {
                    pagingUtil.page = 1;
                    $scope.SelectAll("已随访");
                }
                if (val == "weisuifang") {
                    pagingUtil.page = 1;
                    $scope.SelectAll("未随访");
                }
            }
            //筛选功能
            $scope.screen = function () {
                //style样式
                let style = "style='color: #f8c815' class='glyphicon glyphicon-warning-sign'";
                let styles = "style='color: red'";
                //错误提示信息
                let status;
                //科室
                let department = $(".keshi:selected").val();
                //随访组
                let followUp = $(".suifang:selected").val();
                //开始日期
                let startDate = $("#riqi1").val();
                //结束日期
                let endDate = $("#riqi2").val();
                //住院号
                let admissionNumber = $("#zhuyuan").val();
                //姓名
                let name = $("#name").val();
                //时间比较
                let date1 = new Date(startDate);
                let date2 = new Date(endDate);
                //验证数据正确性
                if ((department == undefined || department == "") && (followUp == undefined || followUp == "") && (startDate == undefined || startDate == "") && (endDate == undefined || endDate == "") && (admissionNumber == undefined || admissionNumber == "") && (name == undefined || name == "")) {
                    status = "请至少选择/填写一项";
                    $("#div").html("<div " + style + "></div>&nbsp;" + "<span " + styles + ">" + status + "</span>");
                    return;
                } else if (date1 > date2) {
                    status = "结束日期不能小于开始日期";
                    $("#div").html("<div " + style + "></div>&nbsp;" + "<span " + styles + ">" + status + "</span>");
                    return;
                } else if ((startDate == "" && endDate != "") || (startDate != "" && endDate == "")) {
                    status = "日期填写不完整";
                    $("#div").html("<div " + style + "></div>&nbsp;" + "<span " + styles + ">" + status + "</span>");
                    return;
                } else if ((admissionNumber != '') && !(/^\d{8,10}$/.test(admissionNumber))) {
                    status = "请正确填写住院号";
                    $("#div").html("<div " + style + "></div>&nbsp;" + "<span " + styles + ">" + status + "</span>");
                    return;
                } else if ((name != '') && !(/^[\u4E00-\u9FA5]{2,4}$/.test(name))) {
                    status = "请正确填写姓名";
                    $("#div").html("<div " + style + "></div>&nbsp;" + "<span " + styles + ">" + status + "</span>");
                    return;
                } else {
                    status = "筛选成功";
                    $("#div").html("<div style='color: #00ee00' class='glyphicon glyphicon-warning-sign'></div>&nbsp;" + "<span style='color: #0e90d2'>" + status + "</span>");
                }

                $.ajax({
                    url: "http://localhost:8989/hospital/Patient/SelectLike",
                    type: "post",
                    data: {
                        "page": pagingUtil.page,
                        "pageNum": pagingUtil.pageNum, "responsibleDepartment": department,
                        "name": followUp,
                        "startDate": startDate,
                        "endDate": endDate,
                        "admissionNumber": admissionNumber,
                        "fullName": name
                    },
                    dataType: "json",
                    success: function (data) {
                        for (let dataKey in data) {
                            $scope.$apply(function () {
                                $scope.page = data[dataKey];
                                console.log($scope.page);
                                if ($scope.page.count == 0) {
                                    $("#column").html("<tr><td style=\"color: red\">没有数据</td></tr>");
                                    $(".data").empty();
                                } else {
                                    setTimeout(function () {
                                        $("#column").empty();
                                    }, 10000)
                                }
                                for (let i = 0; i <= data[dataKey].length - 1; i++) {
                                    $scope.datas = data[dataKey];
                                }
                            });
                        }
                        $(".spinner").css("display", "none");
                    }, error: function () {
                        $("#column").html("<span style='color:red'>加载失败</span>");
                        $(".spinner").css("display", "none");
                    }
                })
            }
        });
    </script>
</head>
<body ng-app="suiFang" ng-controller="suiFangView">
<div id="title"></div>
<div>
    <div class="pull-left col-md-offset-1 col-lg-offset-1 col-xs-offset-1 col-sm-offset-1">
        <span class="h4" style="color: #0a6cd6"><strong>随访进度管理</strong></span>
    </div>
</div>
<h6 class="page-header"></h6>
<div class="col-lg-2">
    <div class="col-lg-offset-1">
        <span style="color: #0a6cd6"><strong>快速筛选</strong></span>
        <br/><br/>
        <form class="form-inline">
            <label class="control-label">1 . 科室 :</label>
            <select class="form-control" id="keshi">
                <option>请选择</option>
            </select>
        </form>
        <br/>
        <form class="form-inline">
            <label class="control-label">2 . 随访组 :</label>
            <select class="form-control" id="suifangzu">
                <option>请选择</option>
            </select>
        </form>
        <br/>
        <label class="control-label">3 . 日期 :</label>
        <input type="date" class="form-control" id="riqi1">
        <div style="text-align: center;">~</div>
        <input type="date" class="form-control" id="riqi2">
        <br/>
        <label class="control-label">4 . 住院号 :</label>
        <input type="text" class="form-control" id="zhuyuan" placeholder="住院号">
        <br/>
        <label class="control-label">5 . 姓名 :</label>
        <input type="text" class="form-control" id="name" placeholder="姓名">
        <br/>
        <input type="button" class="btn btn-info" value="筛选" style="width: 90%;" ng-click="screen()">
    </div>
</div>
<div class="col-lg-1" style="width: 0%">
    <img class="img " src="images/随访规则设定/u789.png">
</div>
<input type="hidden" id="state">
<div class="col-lg-10" style="top:-440px">
    <div class="pull-right" id="div"></div>
    <div class="col-lg-offset-1">
        <input type="button" id="liebiao" class="btn_active btn-info btn" value="列表视图">
        <input type="button" id="rili" class="btn_active  btn-info btn" value="日历视图">
    </div>
    <div class="content show">
        <div class="col-lg-offset-1">
            <div>
                <span class="icheck-info">
                    <input type="radio" name="suifang" id="yisuifang" value="已随访" ng-click="followUp('yisuifang')"/>
                    <label for="yisuifang">已随访</label>
                </span>
                &emsp;
                <span class="icheck-info">
                    <input type="radio" name="suifang" id="weisuifang" value="未随访" ng-click="followUp('weisuifang')"/>
                    <label for="weisuifang">未随访</label>
                </span>
            </div>
        </div>
        <div class="spinner" style="padding-right: 0px;text-align: right;">
            <br/>
            <div class="spinner-container container1">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
            <div class="spinner-container container2">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
            <div class="spinner-container container3">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
        </div>
        <br/><br/><br/>
        <table class="table table-bordered" style="width: 95%;text-align: center;margin:auto">
            <tr style="background-color: #57bfda;color: #ecf0f1">
                <td>门诊号/住院号</td>
                <td>随访组</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>入组日期</td>
                <td>下次随访日期</td>
                <td>状态</td>
                <td>预览</td>
            </tr>
            <tr ng-repeat="data in datas" class="data">
                <td>{{data.admissionNumber}}</td>
                <td>{{data.followUpGroup.name}}</td>
                <td>{{data.fullName}}</td>
                <td>{{data.sex}}</td>
                <td>{{data.age}}</td>
                <td>{{data.dateOfEnrollment}}</td>
                <td>{{data.followUpDate}}</td>
                <td>{{data.status}}</td>
                <td>
                    <a href="患者详细画面.html"><img src="images/单个随访组管理/u167.png"></a>
                </td>
            </tr>
        </table>
        <br/>
        <div class="">
            <div class="pull-left">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第{{page.page}}页/共{{page.remaining_pages}}页&nbsp;&nbsp;&nbsp;&nbsp;总共{{page.count}}条数据
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span id="column"></span>
            </div>
            <div class="col-md-offset-7 col-lg-offset-7 col-xs-offset-7 col-sm-offset-7">
                <!--所有数据分页-->
                <a href style="text-decoration: none" ng-click="page1('-1')" id="shangye">
                    <div class="glyphicon glyphicon-step-backward"></div>
                    上一页
                </a>
                <!--模糊查询分页-->
                <a href style="text-decoration: none;display: none" ng-click="page2('-1')" id="shangyes">
                    <div class="glyphicon glyphicon-step-backward"></div>
                    上一页
                </a>
                &nbsp;&nbsp;&nbsp;
                <!--所有数据分页-->
                <a href style="text-decoration: none" ng-click="page1('+1')" id="xiaye">
                    下一页
                    <div class="glyphicon glyphicon-step-forward"></div>
                </a>
                <!--模糊查询分页-->
                <a href style="text-decoration: none;display: none" ng-click="page2('+1')" id="xiayes">
                    下一页
                    <div class="glyphicon glyphicon-step-forward"></div>
                </a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <!--所有数据分页-->
                <a href style="text-decoration: none" ng-click="page1()" id="weiye">
                    尾页
                    <div class="glyphicon glyphicon-forward"></div>
                </a>
                <!--模糊查询分页-->
                <a href style="text-decoration: none;display: none" ng-click="page2()" id="weiyes">
                    尾页
                    <div class="glyphicon glyphicon-forward"></div>
                </a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                跳转到&nbsp;<input type="number" min="1" id="JumpPage" style="width: 10%"/>页
                &nbsp;&nbsp;
                <!--所有数据分页-->
                <input type="button" class="btn btn-info" style="width:12%;height:3%" value="跳转"
                       ng-click="page1('jump')"
                       id="tiaozhuanye">
                <!--模糊查询分页-->
                <input type="button" class="btn btn-info" style="width:12%;height:3%;display: none" value="跳转"
                       ng-click="page2('jump')"
                       id="tiaozhuanyes">
            </div>
        </div>
    </div>
    <div class="content">
        <div class="col-lg-offset-1">
            <div class="btn-group">
                <!--<button class="btn btn-info" data-calendar-view="year">年</button>-->
                <button class="btn btn-info active" data-calendar-view="month">月</button>
                <button class="btn btn-info" data-calendar-view="week">周</button>
                <!--<button class="btn btn-info" data-calendar-view="day">日</button>-->
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" id="daochu" class="btn_active2  btn-info btn" value="导出随访计划">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="btn-group">
                <button class="btn btn-default" data-calendar-nav="prev">
                    <div class="glyphicon glyphicon-chevron-left" style="color: rgb(128,127,127)"></div>
                </button>
                <button class="btn btn-info" data-calendar-nav="today">今天</button>
                <button class="btn btn-default" data-calendar-nav="next">
                    <div class="glyphicon glyphicon-chevron-right" style="color: rgb(128,127,127)"></div>
                </button>
            </div>
            <div class="container" style="width:1000px">
                <div class="page-header" style="width: 80%">
                    <h3></h3>
                </div>
                <div style="margin-right:250px;margin-left:-44px">
                    <div class="span9" style="width:685px;margin-left:88px;height: 10%;">
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>
            <!--bootStrop 日历插件 js-->
            <script type="text/javascript"
                    src="resources/scripts/assets/bootstrap-calendar/components/underscore/underscore-min.js"></script>
            <script type="text/javascript"
                    src="resources/scripts/assets/bootstrap-calendar/components/jstimezonedetect/jstz.min.js"></script>
            <script type="text/javascript"
                    src="resources/scripts/assets/bootstrap-calendar/js/language/zh-CN.js"></script>
            <script type="text/javascript"
                    src="resources/scripts/assets/bootstrap-calendar/js/calendar.js"></script>
            <script type="text/javascript" src="resources/scripts/assets/bootstrap-calendar/js/app.js"></script>
        </div>
    </div>
</div>
</body>
</html>
